<template>
	<view class="shop-list">
		<view class="shop-title f-color">
			<view class="shop-item" v-for="(item,index) in shopList.data" :key="index" @tap="changeTab(index)">
				<view :class="shopList.currentIndex == index ? 'f-active-color' : ''">{{item.name}}</view>
				<view class="shop-icon">
					<view class="iconfont icon-xiangshangjiantou up" :class="item.status==1?'f-active-color':''"></view>
					<view class="iconfont icon-xiangxiajiantou down" :class="item.status==2?'f-active-color':''"></view>
				</view>
			</view>
		</view>
		<uLine></uLine>
		<CommodityList :dataList="dataList"></CommodityList>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import uLine from '@/components/common/Line.vue'
	import CommodityList from '@/components/common/commodityList.vue'
	export default {
		data() {
			return {
				shopList: {
					currentIndex: 0,
					// status=1表示递增排序，status=2表示递减排序
					data: [{
							name: "价格",
							key: "pprice",
							status: 1
						},
						{
							name: "折扣",
							key: "discount",
							status: 0
						},
						{
							name: "品牌",
							status: 0
						},
					]
				},
				dataList: []
			}
		},
		computed: {
			orderBy() {
				let obj = this.shopList.data[this.shopList.currentIndex]
				let val = obj.status == "1" ? "desc" : "asc"
				return {
					// []包裹使变量值变为key值
					[obj.key]: val
				}
			}
		},
		props: {
			keyword: String
		},
		// 组件用mounted  页面用onLoad
		mounted() {
			this.getData()
		},
		components: {
			uLine,
			CommodityList
		},
		methods: {
			changeTab(index) {
				let idx = this.shopList.currentIndex,
					item = this.shopList.data[idx]
				if (idx == index) {
					item.status = item.status == 1 ? 2 : 1
				} else {
					item.status = 0
					this.shopList.currentIndex = index
					this.shopList.data[index].status = 1
				}
				
				this.getData()
			},
			getData() {
				$http.request({
					url: "/goods/search",
					data: {
						name: this.keyword,
						...this.orderBy
					}
				}).then((res) => {
					this.dataList = res
				}).catch(() => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-title {
		display: flex;

		.shop-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;

			.shop-icon {
				position: relative;
				margin-left: 10rpx;

				.iconfont {
					width: 14rpx;
					height: 8rpx;
					position: absolute;
					left: 0;
					transform: scale(0.7);
					font-weight: bold;
				}

				.up {
					top: -20rpx;
				}

				.down {
					top: 0;
				}
			}
		}
	}
</style>
